<template>
  <view class="machine-detail">

    <uni-nav-bar  title="水机详情" dark  :fixed="true" left-icon="left" :left-text="true"  />

	<view class=" h100vh bggray padding20">


    <view v-if="list.length < 1" class="ac mb30 empty-style">
			<image :src="staticImage.empty" class="empty-img"></image>
			<view class="fs28 name-color">暂无水机</view>
		</view>


		<scroll-view class="list" scroll-y @scrolltolower="getList" v-else>
			<view class="item mb20 bgcfff" v-for="(item,index) in list" :key="index">
				<view class="fs32 mb20">{{item.code}}</view>
				<view class="fs28 name-color mb20">所属片区：{{item.community_info.title}}</view>
				<view class="fs28 name-color mb20">开始运营：{{item.signed_at}}</view>
			</view>
			<uni-load-more :status="loadingType" class="mx-auto" v-if="!$common._empty(loadingType)"></uni-load-more>
		</scroll-view>
  </view>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

  import {
    getUserInfo
  } from '@/api/user.js';
  import {apparatusList} from '@/api/apparatus';
	export default {
		data() {
			return {
				loadingType: '', //加载更多status
				page: 1,
				list: [],
				mapPic: this.$common.imgUrl()+'images/score/map@2x.png',
				staticImage: {
					empty:this.$common.imgUrl() + '/img/other/shuiji@2x.png',
				}
			}
		},
		components: {
			uniLoadMore,
		},
		async onLoad(query) {
			await this.getList();
		},
		onShow() {},
		mounted() {},

    // 滚动监听
    onPageScroll(e) {
      console.log("滚动监听",e)
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
      uni.$emit('scroll');
    },
		methods: {

      async getUserInfo(){
        let that = this;
        getUserInfo().then(res => {
          that.$set(that, 'userInfo', res.data);
          that.userInfo = res.data
        })
      },
			async getList() {
        console.log("this.loadingType",this.loadingType)
				if (this.loadingType === "noMore") {
					//防止重复加载
					return;
				}
        apparatusList({
          page: this.page++,
        }).then(res=>{
          this.list = [...this.list, ...res.data.data];
          let per_page = res.data.per_page
          let count = res.data.data.length
          if (count < per_page) {
            this.loadingType = "noMore"
          } else {
            this.loadingType = "more"
          }
        })
			}
		}
	}
</script>

<style lang="scss">

.machine-detail{
  background: url($baseBgImage) no-repeat center / 100% 100%;
  width: 100%;
  height: 100vh; /* 使用视口高度，确保元素高度充满整个屏幕 */
  //display: flex;
  justify-content: center;
  background-size: cover; /* 使背景图片覆盖整个元素 */
  padding: 0 30rpx;
}
.list {
		height: 100%;
	}

	.item {
		padding: 26rpx 40rpx;
	}

	.empty-style{
		position: absolute;
		top:30%;left:50%;
		transform: translate(-50%,0);
	}

	.empty-img{
		width: 67rpx;
		height: 103rpx;
	}
</style>
